<!doctype html>
        <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
        <!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
        <!--[if IE 8]>    <html class="lt-ie9" lang="en-US"> <![endif]-->
        <!--[if gt IE 8]><!--> <html lang="en-US"> <!--<![endif]-->
        <head>
                <!-- META TAGS -->
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <title>Knowledge Base Theme</title>

                <link rel="shortcut icon" href="../../images/favicon.png" />
                <!-- Style Sheet-->
<!--                <link rel="stylesheet" href="../../style.css"/>-->
                <link rel='stylesheet' id='bootstrap-css-css'  href='../../css/bootstrap5152.css?ver=1.0' type='text/css' media='all' />
                <link rel='stylesheet' id='responsive-css-css'  href='../../css/responsive5152.css?ver=1.0' type='text/css' media='all' />
                <link rel='stylesheet' id='pretty-photo-css-css'  href='../../js/prettyphoto/prettyPhotoaeb9.css?ver=3.1.4' type='text/css' media='all' />
                <link rel='stylesheet' id='main-css-css'  href='../../css/main5152.css?ver=1.0' type='text/css' media='all' />
                <link rel='stylesheet' id='custom-css-css'  href='../../css/custom5152.html?ver=1.0' type='text/css' media='all' />
                <script src="https://cdn.jsdelivr.net/npm/vue"></script>
                <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


                <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
                <!--[if lt IE 9]>
                <script src="../../js/html5.js"></script></script>
                <![endif]-->


        </head>

        <body>

                <!-- Start of Header -->
                <div id="test" class="header-wrapper">
                        <header>
                                <div class="container">


                                        <div class="logo-container">
                                                <!-- Website Logo -->
                                                <a href="index-2.html"  title="Knowledge Base Theme">
                                                        <img src="../../images/logo.png" alt="Knowledge Base Theme">
                                                </a>
                                                <span class="tag-line">Java面试、学习必备网站</span>
                                        </div>


                                        <!-- Start of Main Navigation -->
                                        <nav class="main-nav">
                                                <div class="menu-top-menu-container">
                                                        <ul id="menu-top-menu" class="clearfix">
                                                                <li class="current-menu-item"><a href="/">Home</a></li>
                                                                <li><a href="all-categories-problem.html">所有问题</a></li>
                                                        </ul>
                                                </div>
                                        </nav>
                                        <!-- End of Main Navigation -->

                                </div>
                        </header>
                </div>
                <!-- End of Header -->

                <!-- Start of Search Wrapper -->
                <div class="search-area-wrapper">
                        <div class="search-area container">
                                <h3 class="search-header">Have a Question?</h3>
                                <p class="search-tag-line">If you have any question you can ask below or enter what you are looking for!</p>

                                <form id="search-form" class="search-form clearfix" method="get" action="#" autocomplete="off">
                                        <input class="search-term required" type="text" id="s" name="s" placeholder="Type your search terms here" title="* Please enter a search term!" />
                                        <input class="search-btn" type="submit" value="Search" />
                                        <div id="search-error-container"></div>
                                </form>
                        </div>
                </div>
                <!-- End of Search Wrapper -->
             <div id="problemTagPage">
                <!-- Start of Page Container -->
                <div class="page-container">
                        <div class="container">
                                <div class="row">

                                        <!-- start of page content -->
                                        <div class="span8 main-listing" >

                                                <article v-for="(problem,index) in problems" class="format-standard type-post hentry clearfix" :key="problem.id">

                                                        <header class="clearfix">

                                                                <h3 class="post-title">
                                                                        <a :href="rootURL+'/problem/'+problem.id">{{problem.title}}</a>
                                                                </h3>

                                                                <div class="post-meta clearfix">
                                                                        <span class="date">{{problem.createTime}}</span>
                                                                        <span class="category"><a href="#" title="View all posts in Server &amp; Database">Server &amp; Database</a></span>
                                                                        <span class="comments"><a href="#" title="Comment on Integrating WordPress with Your Website">{{problem.answerNumber}}Comments</a></span>
                                                                        <span class="like-count">66</span>
                                                                </div><!-- end of post meta -->

                                                        </header>

<!--                                                        <p v-if="problem.id==currentProblemId">{{answer.content}}</p>-->
                                                        <div style="font-size: 18px" v-if="problem.id==currentProblemId" v-html="answer.content"></div>
                                                        <a class="readmore-link" @click.prevent="fetchRecommendAnswer($event)"  :problem-id="problem.id"  :href="'http://localhost:18081/api/answer/recommendAnswer/'+problem.id">查看推荐答案</a>

                                                </article>

<!--                                                <div id="pagination">-->
<!--                                                        <a href="#" class="btn active">1</a>-->
<!--                                                        <a href="#" class="btn">2</a>-->
<!--                                                        <a href="#" class="btn">3</a>-->
<!--                                                        <a href="#" class="btn">Next »</a>-->
<!--                                                        <a href="#" class="btn">Last »</a>-->
<!--                                                </div>-->
                                                <div id="pagination" class="pagination"></div>
                                        </div>
                                        <!-- end of page content -->


                                        <!-- start of sidebar -->
                                        <aside class="span4 page-sidebar">

                                                <section class="widget">
                                                        <div class="support-widget">
                                                                <h3 class="title">联系:</h3>
                                                                <p class="intro">justdoitliang@foxmail.com</p>
                                                        </div>
                                                </section>


                                                <section class="widget">
                                                        <h3 class="title">最热问题</h3>
                                                        <ul class="articles">
                                                                <li class="article-entry standard"  v-for="(hotProblem,index) in tagHotProblems"  :key="hotProblem.id">
                                                                        <h4><a :href="rootURL+'/problem/'+hotProblem.id">{{hotProblem.title}}</a></h4>
                                                                        <span class="article-meta">25 Feb, 2013 in <a href="#" title="View all posts in Server &amp; Database">Server &amp; Database</a></span>
                                                                        <span class="like-count">{{hotProblem.likeNumber}}</span>
                                                                </li>
                                                        </ul>
                                                </section>

                                        </aside>
                                        <!-- end of sidebar -->
                                </div>
                        </div>
                </div>
              </div>
                <!-- End of Page Container -->

                <!-- Start of Footer -->
                <footer id="footer-wrapper">

                        <!-- Footer Bottom -->
                        <div id="footer-bottom-wrapper">
                                <div id="footer-bottom" class="container">
                                        <div class="row">
                                                <div class="span6">
                                                        <p class="copyright">
                                                                Copyright &copy; 2020.Company name All rights reserved JavaInterview.
                                                        </p>
                                                </div>
                                                <div class="span6">
                                                        <!-- Social Navigation -->
                                                        <ul class="social-nav clearfix">
                                                                <li class="linkedin"><a target="_blank" href="#"></a></li>
                                                                <li class="stumble"><a target="_blank" href="#"></a></li>
                                                                <li class="google"><a target="_blank" href="#"></a></li>
                                                                <li class="deviantart"><a target="_blank" href="#"></a></li>
                                                                <li class="flickr"><a target="_blank" href="#"></a></li>
                                                                <li class="skype"><a target="_blank" href="skype:#?call"></a></li>
                                                                <li class="rss"><a target="_blank" href="#"></a></li>
                                                                <li class="twitter"><a target="_blank" href="#"></a></li>
                                                                <li class="facebook"><a target="_blank" href="#"></a></li>
                                                        </ul>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <!-- End of Footer Bottom -->

                </footer>
                <!-- End of Footer -->

                <a href="#top" id="scroll-top"></a>

                <!-- script -->
                <script type='text/javascript' src='../../js/jquery-1.8.3.min.js'></script>
                <script type='text/javascript' src='../../js/jquery.easing.1.34e44.js?ver=1.3'></script>
                <script type='text/javascript' src='../../js/prettyphoto/jquery.prettyPhotoaeb9.js?ver=3.1.4'></script>
                <script type='text/javascript' src='../../js/jquery.liveSearchd5f7.js?ver=2.0'></script>
				<script type='text/javascript' src='../../js/jflickrfeed.js'></script>
                <script type='text/javascript' src='../../js/jquery.formd471.js?ver=3.18'></script>
                <script type='text/javascript' src='../../js/jquery.validate.minfc6b.js?ver=1.10.0'></script>
                <script type='text/javascript' src='../../js/custom5152.js?ver=1.0'></script>

                <!--pagenation-->
                <script type='text/javascript' src='../../js/interviewPagination.js'></script>
                <link rel='stylesheet' type='text/css' href='../../css/interviewPagination.css'>

        <div style="display:none">
        </div>
</body>
<script type="text/javascript">

    function  getCurrentTag() {
            var wholeURL=window.location.href;
            var tagId=wholeURL.substr(wholeURL.indexOf("tag/")+4,wholeURL.length);
            return tagId;
    }
    function getRootURL() {
            var  baseURL=window.location.host;
            baseURL="http://"+baseURL;
            return baseURL;
    }
    //vue对象
    var vue=new Vue({
        el:"#problemTagPage",
        data() {
            return {
                problems: [],
                tagHotProblems:[],
                answer:{'content':''},
                currentProblemId:0,
                lastProblemId:0,
                 rootURL:'',
                 totalProblems:0
            }
        },
        methods:{
              fetchRecommendAnswer:function(e){
                  var baseURL=getRootURL();
                 var problemId=e.target.getAttribute("problem-id");
                 if(problemId==this.currentProblemId){
                         this.currentProblemId=0;
                 }else {
                         if(this.answer.content!=''&&(problemId==this.lastProblemId)){
                                this.currentProblemId=problemId;
                                 return ;
                         }
                         axios.get(baseURL + "/api/answer/recommendAnswer/" + problemId).then(resp => {
                                this.answer = resp.data.data;
                                this.currentProblemId = problemId;
                         })
                 }
                 this.lastProblemId=problemId;
              }
        },
        created(){
                var baseURL=getRootURL();
                var tagId=getCurrentTag();
            axios.get(baseURL+'/api/problem/tag/'+tagId+'/page/1').then(response => {
                this.problems=response.data.data;
                }).catch(error=>{
                        this.tags=[{'id':1,'name':'abcd'}]
                });
                axios.get(baseURL+'/api/problem/tag/'+tagId+'/hotProblem').then(response => {
                        this.tagHotProblems=response.data.data;
                }).catch(error=>{
                                this.tags=[{'id':1,'name':'abcd'}]
                 });
        }
    });
    //加载分页插件
    var dataTotal=100;
    var baseURL=getRootURL();
    var tagId=getCurrentTag();
    axios.get(baseURL+'/api/problem/tag/'+tagId+'/total').then(resp=>{
            dataTotal=resp.data.data;
    }).catch(error=>{

    })
    setTimeout(function () {
            var pageTotal=100;
            if(dataTotal%15==0)
                    pageTotal=dataTotal/15;
            else
                    pageTotal=Math.round(dataTotal/15)+1;
            new Page({
                    id: 'pagination',
                    curPage: 1, //初始页码
                    pageTotal: pageTotal, //总页数
                    pageAmount: 15, //每页多少条
                    dataTotal:dataTotal, //总共多少条数据
                    pageSize: 1, //可选,分页个数
                    showPageTotalFlag: true, //是否显示数据统计
                    showSkipInputFlag: true, //是否支持跳转
                    getPage: function(page) {
                            //获取当前页数
                            var cpage=this.curPage;
                            var baseURL=getRootURL();
                            var tagId=getCurrentTag();
                            axios.get(baseURL+'/api/problem/tag/'+tagId+'/page/'+page).then(response => {
                                    vue.$data.problems=[];
                            vue.$data.problems=response.data.data;
                    }).catch(error=>{
                                    this.tags=[{'id':1,'name':'abcd'}]
                            });
                    }
            })
    },500)
</script>

<script id="pagenition" type="text/javascript">


</script>

</html>
